<template>
  <!-- 模板内容不变，与原代码一致 -->
  <view class="message-list-container">
    <!-- 标题栏 -->
    <view
      class="message-header"
      style="display: flex; justify-content: space-between"
    >
      <view>
        <text class="header-title">留言详情</text>
        <!-- <text class="header-count">{{ dataList.hui.length }} 条留言</text> -->
      </view>
    </view>
    <view class="message-list">
      <!-- 留言项 - 循环渲染  :class="{ 'last-item': index == dataList.length - 1 }"-->
      <view class="message-item">
        <!-- 头像和用户信息 -->
        <view class="user-info">
          <view
            class="avatar"
            :style="{ backgroundColor: stringToColor(dataList.title) }"
          >
            <text class="avatar-text">{{ dataList.title.charAt(0) }}</text>
          </view>

          <view class="user-detail">
            <view
              class="username"
              style="font-size: 35rpx; font-weight: bold"
              >{{ dataList.title }}</view
            >
            <view class="username" v-if="dataList.zhu_ti_name">
              {{ dataList.zhu_ti_name }}</view
            >
            <view class="username">{{ dataList.username }}</view>

            <!-- <view class="time">{{ formatTime(item.createTime) }}</view> -->
            <view class="time">{{ dataList.time }}</view>
          </view>
        </view>
        <view>
          <view class="card-body">
            <view class="license-images">
              <u-image
                v-for="(img, index) in dataList.img"
                :key="index"
                :src="img.url"
                height="auto"
                width="100%"
                mode="widthFix"
                class="license-img"
                @click="previewImage(img.url)"
              ></u-image>
            </view>
          </view>
        </view>
        <!-- 留言内容 -->
        <view class="message-content">
          <text>{{ dataList.content }}</text>
        </view>
        <!-- 互动按钮 -->
        <view class="message-actions">
          <view class="action-item" @click="handleShowComment(true)">
            <text class="icon-reply">💬</text>
            <text class="action-text">回复</text>
          </view>
          <view class="action-item" @click="handleShowComment(false)">
            <view class="icon-reply">
              <image
                :src="getResource(`img/phone/mini/siXin.png`)"
                style="width: 20px; height: 20px"
              >
              </image
            ></view>
            <text class="action-text">私信</text>
          </view>
          <view class="action-item" @click="ClickLike(dataList)">
            <view class="icon-reply">
              <image
                :src="getResource(`img/phone/mini/zan.png`)"
                style="width: 20px; height: 20px"
                v-if="dataList.zan_is == 0"
              >
              </image>
              <image
                :src="getResource(`img/phone/mini/zan_1.png`)"
                style="width: 20px; height: 20px"
                v-if="dataList.zan_is == 1"
              >
              </image>
            </view>
            <text class="action-text">{{
              dataList.zan_is == 0 ? "点赞" : "已点赞"
            }}</text>
          </view>
        </view>
        <view class="reply-list" v-if="dataList.hui && dataList.hui.length > 0">
          <view
            class="reply-item"
            v-for="(reply, rIndex) in dataList.hui"
            :key="rIndex"
          >
            <view class="reply-username">{{ reply.username }}：</view>
            <view class="reply-content">{{ reply.content }}</view>
            <view class="reply-time">{{ reply.time }}</view>
          </view>
        </view>
      </view>
      <view class="empty-state" v-if="dataList.length === 0">
        <view class="empty-icon">💬</view>
        <view class="empty-text">暂无留言，快来抢沙发吧~</view>
      </view>
    </view>

    <u-popup
      :show="showCommentPopup"
      :height="500"
      mode="bottom"
      @close="showCommentPopup = false"
    >
      <uu-emoji-input
        v-model="showCommentPopup"
        :is-reply-mode="isReplyMode"
        @update:modelValue="onCommentPopupChange"
        @submit="handleMessageSubmit"
      ></uu-emoji-input>
    </u-popup>
  </view>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed } from "vue";
import UuEmojiInput from "@/components/uu-emoji-input/uu-emoji-input.vue";
import {
  GetLiuYanRead,
  Postliu_yan_id,
  PostLiuYan,
  PostSiXin,
} from "@/api/news.js";
import { onLoad } from "@dcloudio/uni-app";
import { getResource } from "@/utils/Resource.js";
import {
  showToast,
  showLoading,
  hideLoading,
  showModalNoCancel,
  showModal,
} from "@/utils/toast";
// 集中管理所有状态
const state = reactive({
  isReplyMode: false,
  replyTarget: null,
  SysLabelList: [],
  showCommentPopup: false,
  count: 0,
  form: {
    id: "",
  },

  dataList: { username: "", title: "" },
});
const { showCommentPopup, dataList, form, isReplyMode, replyTarget } =
  toRefs(state);
onLoad(async (e) => {
  if (e.id) {
    form.value.id = e.id;
  }
});
onMounted(async () => {
  await init();
});
const init = async () => {
  try {
    const res = await GetLiuYanRead(form.value.id);

    dataList.value = res.data;
  } catch (error) {}
};

const ClickLike = async (e) => {
  try {
    const res = await Postliu_yan_id(e.id);
    showModal(
      {
        title: "系统消息",
        content: res.data == 1 ? "成功点赞" : "取消点赞",
        showCancel: false, // 隐藏取消按钮
      },
      (result) => {
        if (result.error) {
          uni.showToast({ title: "通知显示失败", icon: "none" });
          return;
        }
        init();
      }
    );
  } catch (error) {}
};
const handleShowComment = (e) => {
  isReplyMode.value = e;
  showCommentPopup.value = true;
};

const onCommentPopupChange = (newState) => {
  showCommentPopup.value = newState;
};
const handleMessageSubmit = async (content) => {
  if (!content.trim()) return;

  if (isReplyMode.value) {
    console.log("回复");
    console.log(replyTarget.value);
    try {
      const res = await PostLiuYan({
        to_id: dataList.value.id,
        content: content,
      });
      if (res.code == 10000) {
        await init();
      }
    } catch (error) {}
  } else {
    try {
      const res = await PostSiXin({
        to_user_id: dataList.value.to_id,
        content: content,
      });
      if (res.code == 10000) {
        await init();
      }
    } catch (error) {}
  }
};
// 预览图片
const previewImage = (url) => {
  uni.previewImage({
    urls: [url],
  });
};
const stringToColor = (str) => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  const c = (hash & 0x00ffffff).toString(16).toUpperCase();
  return `#${"00000".substring(0, 6 - c.length)}${c}`;
};
</script>
<style lang="scss" scoped>
.message-list-container {
  background-color: #f5f7fa;
  padding-bottom: 120rpx;

  .message-header {
    padding: 30rpx 20rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    .header-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }

    .header-count {
      margin-left: 15rpx;
      font-size: 26rpx;
      color: #999;
    }
  }

  .bottom-action {
    background: #137ad3;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    &:hover {
      background: #40a9ff;
      transform: translateY(-1px);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    }

    &:active {
      background: #096dd9;
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
  }

  .message-list {
    padding: 20rpx;

    .message-item {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 25rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      &.last-item {
        margin-bottom: 0;
      }

      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .avatar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;

          .avatar-text {
            color: #fff;
            font-size: 30rpx;
            font-weight: bold;
          }
        }

        .user-detail {
          flex: 1;

          .username {
            font-size: 30rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 5rpx;
          }

          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .message-content {
        font-size: 30rpx;
        color: #333;
        line-height: 1.6;
        margin-bottom: 20rpx;
        word-break: break-all;
      }

      .message-actions {
        display: flex;
        margin-bottom: 15rpx;

        .action-item {
          display: flex;
          align-items: center;
          margin-right: 40rpx;
          color: #666;
          font-size: 26rpx;
          cursor: pointer;

          &:active {
            opacity: 0.7;
          }

          .icon-reply {
            margin-right: 8rpx;
            font-size: 28rpx;
          }
        }
      }

      .reply-list {
        background-color: #f9f9f9;
        border-radius: 10rpx;
        padding: 15rpx;
        margin-top: 15rpx;

        .reply-item {
          padding: 10rpx 0;
          border-bottom: 1px dashed #eee;

          &:last-child {
            border-bottom: none;
          }

          .reply-username {
            font-size: 28rpx;
            color: #3498db;
            font-weight: 500;
            display: inline;
          }

          .reply-content {
            font-size: 28rpx;
            color: #666;
            display: inline;
          }

          .reply-time {
            font-size: 24rpx;
            color: #ccc;
            margin-top: 5rpx;
            display: block;
          }
        }
      }
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 120rpx 0;
      color: #999;

      .empty-icon {
        font-size: 80rpx;
        margin-bottom: 30rpx;
      }

      .empty-text {
        font-size: 32rpx;
      }
    }
  }
}
.title-view {
  background-color: #f7f7f7;
  // background-color: red !important;
  .title-input {
    padding-left: 10px;
    background: #fff;
    margin: 5px 10px;
    padding: 5px;
    border-radius: 2px;
  }
} /* 6. 复选框样式优化 */
.checkbox-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx 20rpx;
}
</style>
